<template>
    <div class="register">
        <van-nav-bar
                title="注册"
                left-arrow
                right-text="登录"
                @click-left="toLogin"
                @click-right="toLogin">
        </van-nav-bar>
        <div class="registerWrap">
            <div class="welcomeTips text-gray-b3-pk font-size-20-pk">Hi，欢迎您来到屏客名榜</div>
            <div class="inputWrap">
                <van-field
                        v-model.trim="phone"
                        placeholder="请输入手机号"
                        clearable
                        :left-icon="require('@img/register-phone.png')"
                        class="formPhone formItem">
                </van-field>
                <van-field
                        v-model.trim="smsCode"
                        placeholder="请输入短信验证码"
                        clearable
                        :left-icon="require('@img/register-sms-code.png')"
                        class="forSmsCode formItem">
                    <send-sms-code code-type="1" :phone="phone" slot="button"></send-sms-code>
                </van-field>
                <van-field
                        v-model.trim="password"
                        placeholder="请输入6-20位密码"
                        clearable
                        :left-icon="require('@img/login-password.png')"
                        class="formPassword formItem">
                </van-field>
                <van-field
                        v-model.trim="inviteNum"
                        placeholder="请输入验证码"
                        clearable
                        class="inviteNum formItem">
                </van-field>
            </div>
            <van-button
                    :disabled="!privacyDisable"
                    type="danger"
                    loading-text="注册"
                    block
                    @click="register">
                注册
            </van-button>
            <div class="privacyWrap d-flex-pk">
                <van-checkbox
                        v-model="privacyCheck"
                        shape="square"
                        icon-size="14px"
                        class="privacyCheck"></van-checkbox>
                <div class="privacyTips text-gray-bf-pk">
                    同意屏客名榜的
                    <span class="text-red-pk">《用户协议》、《隐私协议》、《法律声明》</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import SendSmsCode from "../../components/smsCode/SendSmsCode";
    export default {
        name: 'register',
        components: {SendSmsCode},

        data() {
            return {
                phone: "",
                password: "",
                smsCode: "",
                privacyCheck: false,
                inviteNum: this.$store.state.inviteNum
            }
        },

        created() {
        },
        computed: {
            privacyDisable() {
                return this.privacyCheck
            }
        },
        watch: {},
        methods: {
            toLogin() {
                this.$router.push({path: "/login"})
            },
            async register() {
                if(!this.$valid.phone(this.phone)
                    || !this.$valid.password(this.password)
                    || !this.$valid.password(this.smsCode)) {
                    return
                }
                this.$toast.loading({
                    message: "提交中",
                    forbidClick: true
                });
                let dyncKey = await this.$util.getDynamicSecretKey();
                let password = this.$util.encrypt(this.password, dyncKey.tokenKey);
                this.$api.register({
                    "inviteNumber": this.inviteNum,
                    "password": password,
                    "phone": this.phone,
                    "smsCode": this.smsCode,
                    "userKey": dyncKey.userKey
                }).then(res => {
                    if(this.$resResult(res)) {
                        this.$toast.success({
                            message:"注册成功",
                            onClose: () => {
                                this.toLogin()
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .register {
        .van-cell {
            padding: 8px 12px;
            box-shadow: 0 2px 6px 0 rgba(216, 40, 10, 0.2);
        }
        .welcomeTips {
            padding: 38px 0;
        }
        .registerWrap {
            padding: 0 27px;
            .inputWrap {
                margin-bottom: 40px;
            }
            .formItem {
                margin-bottom: 20px;
            }
        }
        .privacyWrap {
            .privacyCheck {
                padding-top: 2px;
                margin-right: 8px;
                padding-right: 4px;
            }
            align-items: flex-start;
            padding: 12px 4px;
            font-size: 12px;
        }
    }
</style>
